<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>

          <a-col :xs="24" :sm="12">
            <a-form-item label="付款编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['payablesNo']" :disabled="true" placeholder="请输入付款编号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="合同信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['leaseContractId']" :disabled="true"
                                   dict="zcgl_lease_contract_info,contract_num,id" @change="changeLease" />
            </a-form-item>
          </a-col>
          <a-col v-if="!isReadOnly" :xs="24" :sm="12">
            <a-form-item label="资产信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['assetId']" :disabled="true"
                                   @change="selectSub"
                                   dict="zcgl_asset_info,asset_name,id,status>1" />
            </a-form-item>
          </a-col>

          <a-col v-if="!isReadOnly" :xs="24" :sm="12">
            <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag
                :trigger-change="true"
                v-decorator="['assetSubIds', validatorRules.assetSubIds]"
                :dictOptions="searchOptions"
                :disabled="true"
                placeholder="" />
            </a-form-item>
          </a-col>

          <a-col v-if="!isReadOnly" :xs="24" :sm="12">
            <a-form-item label="客户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['customerId']" :disabled="true"
                                   dict="zcgl_customer_info,name,id" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['totalMoney']" :disabled="true" placeholder="请输入付款金额" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['paymentType', validatorRules.paymentType]"
                                 :trigger-change="true" dictCode="pay_type" placeholder="请选择付款方式" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择付款日期" v-decorator="['paymentDate', validatorRules.paymentDate]"
                      :trigger-change="true" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="付款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true" v-decorator="['paymentBy']" dict="sys_user,realname,id" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="收款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag v-decorator="['payeeBy', validatorRules.payeeBy]" :trigger-change="true"
                                   :dictOptions="payeeByList" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="付款说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['paymentRemark']" rows="4" placeholder="请输入付款说明" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['remark']" rows="4" :disabled="true" placeholder="" />
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

import pick from 'lodash.pick'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import { payment } from '@/api/payables'
import { AssetSubMixin } from '@/api/assetSubMixin'

export default {
  name: 'PayablesInfoOperationModal',
  mixins: [JEditableTableMixin, AssetSubMixin],
  components: {
    JDate,
    JDictSelectTag,
    JSearchSelectTag
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      payeeByList: [],
      da: {},
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      isReadOnly: false,
      validatorRules: {
        paymentType: {
          rules: [
            { required: true, message: '请选择付款方式!' }
          ]
        },
        paymentDate: {
          rules: [
            { required: true, message: '请选择付款日期!' }
          ]
        },
        assetSubIds: {
          rules: [
            { required: false, message: '请输入资产明细!' }
            // { validator: this.validateCode }
          ]
        },
        payeeBy: {
          rules: [
            { required: true, message: '请选择收款人!' }
          ]
        }
      },
      refKeys: ['payablesDetails'],
      tableKeys: ['payablesDetails'],
      activeKey: 'payablesDetails',
      // 应付款项详情
      payablesDetailsTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '款项说明',
            key: 'paymentInstructions',
            type: FormTypes.select,
            width: '200px',
            dictCode: 'payment_instructions',
            placeholder: '请选择${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '付款金额',
            key: 'amountMoney',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      url: {
        add: '/zcgl/payablesInfo/add',
        edit: '/zcgl/payablesInfo/edit',
        payablesDetails: {
          list: '/zcgl/payablesInfo/queryPayablesDetailsByMainId'
        }
      }
    }
  },
  methods: {
    getAllTable () {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    show (title, record, type) {
      this.confirmLoading = false
      this.da.type = type
      this.title = title
      this.form.resetFields()
      this.model = Object.assign({}, record)
      let that = this
      this.payeeByList = []
      if (this.model.customerId) {
        let a = this.model.customerId.split(',')
        let b = this.model.customerId_dictText.split(',')
        a.forEach((item, index) => {
          that.payeeByList.push({'value': item, 'text': b[index] })
        })
        this.model.payeeBy = a[0]
      }
      if (this.model.leaseContractId) {
        this.isReadOnly = true
      } else {
        this.isReadOnly = false
      }
      this.selectSub1(this.model.assetId, this.model.assetSubIds)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'payeeBy', 'payablesNo', 'leaseContractId', 'assetId', 'customerId', 'totalMoney', 'paymentType', 'paymentDate', 'paymentBy', 'paymentRemark', 'remark'))
      })
    },
    // /** 调用完edit()方法之后会自动调用此方法 */
    // editAfter() {
    //   let fieldval = pick(this.model,'payablesNo','leaseContractId','assetId','customerId','totalMoney','paymentType','paymentDate','paymentBy','paymentRemark','remark')
    //   this.$nextTick(() => {
    //     this.form.setFieldsValue(fieldval)
    //   })
    //   // 加载子表数据
    //   if (this.model.id) {
    //     let params = { id: this.model.id }
    //     this.requestSubTableData(this.url.payablesDetails.list, params, this.payablesDetailsTable)
    //   }
    // },
    // /** 整理成formData */
    // classifyIntoFormData(allValues) {
    //   let main = Object.assign(this.model, allValues.formValue)
    //   return {
    //     ...main, // 展开
    //     payablesDetailsList: allValues.tablesValue[0].values,
    //   }
    // },
    // validateError(msg){
    //   this.$message.error(msg)
    // },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const that = this
      if (this.da.type == 1) {

        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            // console.log('表单提交数据', formData)
            payment(formData).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              // that.close()
            })
          }
        })
      }
    },
    handleCancel () {
      this.close()
    },
    popupCallback (row) {
      this.form.setFieldsValue(pick(row, 'payablesNo', 'leaseContractId', 'assetId', 'customerId', 'totalMoney', 'paymentType', 'paymentDate', 'paymentBy', 'paymentRemark', 'remark'))
    }

  }
}
</script>

<style scoped>
</style>